<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!-- 原静态页面，引入的方式 -->
    <!--    <link rel="stylesheet" href="../layui/css/layui.css">-->
    <!-- 动态页面，引入的方式，使用 thymeleaf 模板引擎 th：为前缀-->
    <link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}">
</head>
<body>

    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-inline" style="width: 150px;">
                <input type="text" id="realName" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-inline" style="width: 150px;">
                <input type="text" id="phone" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <div class="layui-input-inline">
                <button class="layui-btn" onclick="query()">查询</button>
            </div>
        </div>

    </div>

    <button class="layui-btn" onclick="toAdd()">增加</button>

    <table id="customerList"></table>

    <!-- 原静态页面引入的方式 -->
    <!--    <script src="layui/layui.all.js"></script>-->
    <!-- 动态页面引入的方式 -->
    <script th:src="@{/webjars/layui/layui.all.js}"></script>
    <!-- 引入JQuery -->
    <script th:src="@{/webjars/jquery/jquery.js}"></script>
    <!-- 引入该页面对应的js方法文件 -->
    <script th:src="@{/js/customer/customer.js}"></script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
</body>
</html>